<script setup lang="ts">
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { useDept } from "./utils/hook";
import AddCoordinate from "@/components/AddCoordinate/index.vue";
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
const { locale } = useTranslationLang();
import { useI18n } from "vue-i18n";
const { t } = useI18n();

const {
    filterStation
} = useDept();

const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({
        startstation: null,
        endstation: null,
        speedlevel: null,
        status: 1,
        linetype: null,
        note: "",
        direction: null,
        mapid: null,
        assistList: [{}],
        detailList: []
    }),
    stationSelect: [],
    StatusOptions: [],
    actionType: [],
    SpeedLevelArr: [],
    directionOptions: [],
    mapTypes: [],
    assistSelect: [],
    directions: []
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const stationSelect = ref(props.stationSelect);
const SpeedLevelArr = ref(props.SpeedLevelArr);
const mapTypes = ref(props.mapTypes);

// 状态select
const StatusOptions = reactive([
    { value: 1, label: t('road.enable') },
    { value: 0, label: t('road.disable') },
    { value: 2, label: t('road.lock') },
])

// 动作类型select
const actionType = reactive([
    { value: 0, label: t('road.straightLine') },
    { value: 1, label: t('road.concaveArc') },
    { value: 2, label: t('road.convexArc') },
    { value: 3, label: t('road.bezierCurve') },
])

// 路段方向select
const directionOptions = reactive([
    { value: 1, label: t('road.oneWay') },
    { value: 2, label: t('road.bidirectional') },

])

// 行驶方向select
const directions = reactive([
    { value: 0, label: t('road.backwardWalking') },
    { value: 1, label: t('road.justGoing') },
    { value: 2, label: t('road.shiftLeft') },
    { value: 3, label: t('road.shiftRight') }
])

function getRef() {
    return ruleFormRef.value;
}

function directionChange(val) {
    if (val === 1) {
        if (newFormInline.value.detailList.length !== 1) newFormInline.value.detailList.pop()
        newFormInline.value.detailList[0].startstation = newFormInline.value.startstation
        newFormInline.value.detailList[0].endstation = newFormInline.value.endstation
    } else {
        newFormInline.value.detailList.push({})
        newFormInline.value.detailList[0].startstation = newFormInline.value.startstation
        newFormInline.value.detailList[0].endstation = newFormInline.value.endstation
        newFormInline.value.detailList[1].startstation = newFormInline.value.endstation
        newFormInline.value.detailList[1].endstation = newFormInline.value.startstation
    }
}

defineExpose({ getRef });
</script>

<template>
    <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="100px"
        :label-position="locale === 'en' ? 'top' : 'right'">
        <el-row :gutter="30">
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('road.startingSite')" prop="startstation">
                    <el-select v-model="newFormInline.startstation" style="width:100%">
                        <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
                            :value="item.stationid" />
                    </el-select>
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('road.terminalStation')" prop="endstation">
                    <el-select v-model="newFormInline.endstation" style="width:100%">
                        <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
                            :value="item.stationid" />
                    </el-select>
                </el-form-item>
            </re-col>
            <!-- <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label="速度等级" prop="speedlevel">
          <el-select v-model="newFormInline.speedlevel" placeholder="请选择速度等级" style="width:100%">
            <el-option v-for="item in SpeedLevelArr" :key="item.Name" :label="item.Name" :value="item.Name" />
          </el-select>
        </el-form-item>
      </re-col> -->
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('road.roadSectionStatus')" prop="status">
                    <el-select v-model="newFormInline.status" style="width:100%">
                        <el-option v-for="item in StatusOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('road.roadSectionType')" prop="linetype">
                    <el-select v-model="newFormInline.linetype" style="width:100%">
                        <el-option v-for="item in actionType" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('road.direction')" prop="direction">
                    <el-select v-model="newFormInline.direction" style="width:100%" @change="directionChange">
                        <el-option v-for="item in directionOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24" v-if="newFormInline.linetype === 1 || newFormInline.linetype === 2">
                <el-form-item :label="t('road.angle')" prop="angle">
                    <el-input-number v-model="newFormInline.angle" controls-position="right" />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item :label="t('road.mapToWhichItBelongs')" prop="mapid">
                    <el-select v-model="newFormInline.mapid" style="width:100%">
                        <el-option v-for="item in mapTypes" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
            </re-col>
            <re-col :value="24" :xs="24" :sm="24" v-show="newFormInline.linetype === 3">
                <el-form-item :label="t('road.auxiliaryStation')" prop="assistList">
                    <Add-coordinate :data="newFormInline.assistList"></Add-coordinate>
                </el-form-item>
            </re-col>
            <re-col :value="24" :xs="24" :sm="24">
                <el-form-item :label="t('road.roadSectionDetails')" prop="detailList" class="assiststations">
                    <el-table :data="newFormInline.detailList" table-layout="auto" size="small" border class="table">
                        <el-table-column :label="t('road.startingSite')" width="100">
                            <template #default="scope">
                                <el-select v-model="scope.row.startstation" size="small" style="width:100%">
                                    <el-option v-for="item in stationSelect" :key="item.stationid"
                                        :label="item.stationname" :value="item.stationid" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column :label="t('road.terminalStation')" width="100">
                            <template #default="scope">
                                <el-select v-model="scope.row.endstation" size="small" style="width:100%">
                                    <el-option v-for="item in stationSelect" :key="item.stationid"
                                        :label="item.stationname" :value="item.stationid" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column :label="t('road.roadSectionStatus')" width="100">
                            <template #default="scope">
                                <el-select v-model="scope.row.status" size="small" style="width:100%">
                                    <el-option v-for="item in StatusOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column :label="t('road.speedLevel')" width="100">
                            <template #default="scope">
                                <el-select v-model="scope.row.speedlevel" size="small" style="width:100%">
                                    <el-option v-for="item in SpeedLevelArr" :key="item.Name" :label="item.Name"
                                        :value="item.Name" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column :label="t('road.drivingDirection')" width="100">
                            <template #default="scope">
                                <el-select v-model="scope.row.direction" size="small" style="width:100%">
                                    <el-option v-for="item in directions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column :label="t('road.remarks')">
                            <template #default="scope">
                                <el-input v-model="scope.row.note" size="small" clearable />
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
            </re-col>
            <re-col :value="24" :xs="24" :sm="24">
                <el-form-item :label="t('road.remarks')" prop="note">
                    <el-input v-model="newFormInline.note" clearable type="textarea" />
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
    margin-right: 16px;
}

.assiststations::v-deep {
    .el-form-item__content {
        overflow-x: auto;
    }
}

.table::v-deep {
    width: 100%;

    .el-table__header {
        width: 100% !important;
    }

    .cell {
        padding: 5px !important;
    }
}
</style>
